<template>
  <div class="cart-goods-list">
    <!-- 商品列表 -->
    <scroll class="content" ref="betterScroll">
      <!-- 购物车中有商品 -->
      <cart-list-item v-for="t in list" :key="t.iid" :goods-item="t" />
    </scroll>

      <!-- 购物车中没有商品 -->
      <cart-no-goods :list-length="length" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Scroll from 'components/common/Scroll/Scroll.vue'
import CartListItem from './CartListItem.vue'
import CartNoGoods from './CartNoGoods.vue'

export default {
  name: 'CartGoodsList',
  props: {},
  components: {
    Scroll,
    CartListItem,
    CartNoGoods
  },
  data () {
    return {}
  },
  created () {},
  mounted () {},
  updated () {},
  computed: {
    ...mapGetters({ list: 'cartList', length: 'goodsCountNum' })
  },
  // 活跃
  activated () {
    // 在每次组件活跃时, 重新计算一下scroll的高度
    this.$refs.betterScroll.refresh()
  },
  // 失活
  deactivated () {},
  methods: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.cart-goods-list {
  // 这里加定位是为方便无商品组件的定位
  position: relative;

  .content {
    height: calc(100vh - 144px);
    overflow: hidden;
  }
}
</style>
